import React, { useEffect, useRef } from 'react';

const ColorWheel = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const width = canvas.width;
    const height = canvas.height;
    const radius = Math.min(width, height) / 2 - 10;
    const centerX = width / 2;
    const centerY = height / 2;

    // 定义颜色数组和对应的角度范围
    const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
    const angleRange = 360 / colors.length;

    // 绘制每个颜色块
    colors.forEach((color, index) => {
      const startAngle = index * angleRange * (Math.PI / 180);
      const endAngle = (index + 1) * angleRange * (Math.PI / 180);
      ctx.beginPath();
      ctx.moveTo(centerX, centerY);
      ctx.arc(centerX, centerY, radius, startAngle, endAngle);
      ctx.closePath();
      ctx.fillStyle = color;
      ctx.fill();
    });

    return () => {
      // 可以在这里进行清理工作，比如移除事件监听器等
    };
  }, []);

  return (
    <canvas ref={canvasRef} width={300} height={300} />
  );
};

export default ColorWheel;

